<template>
	<view>
		<view class="pics">
			<!-- 左边区域 -->
			<scroll-view class="left" scroll-y="true" >
				<view @click="dianji(index,item.id)" v-for="(item,index) in imgArr" :key="item.id" :class="currentIdx === index ? 'active' : '' ">{{item.title}}</view>
			</scroll-view>
			<!-- 右边区域 -->
			<scroll-view class="right" scroll-y="true" >
				<view class="item" v-for="(item,index) in detailsArr" :key="index" >
					<image :src="item.imgUrl" @click="lookpic(item.imgUrl)"></image>
					<text>{{item.textContent}}</text>
				</view>
				<view v-show="flag">
					暂无数据
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				imgArr:[],
				currentIdx:0,
				detailsArr:[],
				flag:false
			}
		},
		onLoad(){
			this.getImage();
			// this.getPicDetail();
		},
		methods: {
			async getImage(){
				const res = await this.$myRequest({
					url:"/selectImgCategory",
				})
				console.log(res)
				this.imgArr = res.data
				//拿到左边第一条数据id
				this.dianji(0,this.imgArr[0].id)
			},
			dianji(index,id){
				this.currentIdx = index
				this.getPicDetail(id)
			},
			async getPicDetail(id){
				const res = await this.$myRequest({
					url:'/getImgTextList',
					data:{pid:id}
				})
				this.detailsArr = res.data
				if(this.detailsArr.length === 0 ){
					this.flag = true
				}
			},
			//查看图片
			lookpic(a){
				const urls = this.detailsArr.map((item)=>{
					return item.imgUrl
				})
				//预览图片
				uni.previewImage({
					urls:urls,
					current:a
				})
			}
		}
	}
</script>

<style lang="scss">
	.pics{
		height: 100%;
		display: flex;
		
		.left{
			width: 200rpx;
			height: 100%;
			border-right: 1px solid black;
			view{
				height: 60px;
				line-height: 60px;
				color: #333;
				text-align: center;
				font-size: 32rpx;
				border-top:1px solid gray;
			}
			.active{
				background-color: $shop-color;
				color:$shop-font;
			}
		}
		.right{
			height: 100%;
			width:530rpx;
			margin: 0 auto;
			.item{
				image{
					width: 100%;
					border-radius: 5px;
				}
			}
			text{
				font-size: 1.1rem;
				line-height: 30px;
			}
		}
		
	}
</style>
